<template>
  <view>
    <view class="custom_top">
      <view class="item left"></view>
      <view class="item title">消息</view>
      <view class="item right">
        <i class="iconfont icon-lianxiren" @click="jumpPage('/pages/im/friend_list')"></i>
        <i class="iconfont icon-icon_tianjia" @click="jumpPage('/pages/im/search_friend')"></i>
      </view>
    </view>
    <view class="custom_top_blank"></view>

    <view class="conversation_list">
      <view class="items">

        <view class="item" v-for="(item, index) in data_list" :key="index" @click="jumpPage('/pages/im/conversation?id=' + item.conversation_id)">
          <view class="bd">
            <image class="avatar" :src="item.cover" mode="scaleToFill" />
            <view class="centerinfo">
              <view class="name">{{item.name}}</view>
              <view class="message_description" v-if="item.last_message != ''">{{item.last_message}}</view>
            </view>
            <view class="rightinfo">
              <view class="date">{{item.last_message_date}}</view>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
export default {
  data() {
    return {
      loading: true,
      data_list: [],
      data_list_loading: true,
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
      },
    }
  },

  onLoad: function() {
    this.getInit();
  },

  // 加载更多
  onReachBottom() {
    this.getMore();
  },

  // 下拉刷新
  onPullDownRefresh: function() {
    this.getInit();
  },

  methods: {
    // 请求接口，获取列表数据
    getConversations: function() {
      let params = this.params;
      request.post('/im/getConversations', params).then(res => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.data_list_loading = false;

        // 返回数据为空
        if (res.data.total == 0) {
          this.data_list = [];
          return false;
        }

        // 组装数据
        if (res.data.current_page == 1) {
          this.data_list = res.data.data;
        } else {
          this.data_list = this.data_list.concat(res.data.data);
        }

        // 最后一页
        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        this.params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
      })
    },

    // 初始化请求
    getInit: function() {
      uni.showLoading()
      this.params.page = 1;
      this.getConversations();
    },

    // 加载更多
    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getConversations();
      }
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url("im.css");
page {
  background-color: #fff;
}
.custom_top_blank {
  height: 54px;
  padding-top: var(--status-bar-height);
}
.custom_top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
  height: 53px;
  line-height: 53px;
  border-bottom: 1px solid #f9f9f9;
  background: #fff;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--status-bar-height);
}
.custom_top .item {
  flex: 1;
}
.custom_top .title {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.custom_top .right {
  text-align: right;
}
.custom_top .right .iconfont {}
.custom_top .right .iconfont:first-child {
  margin-right: 6px;
}
</style>
